<template>
  <section class="component customer-info panel">
    <!-- 客户信息 -->
    <div>
      <el-row>
        <el-col :span="7">
          <span>客户姓名：</span>
          <span></span>
        </el-col>
        <el-col :span="5" class="padding-top-18">
          <span>客户号：</span>
          <span>{{ topInfo.loanAmount }}元</span>
        </el-col>
        <el-col :span="6" class="padding-top-18">
          <span>英文名：</span>
          <span></span>
        </el-col>
        <el-col :span="6" class="padding-top-18">
          <span>性别：</span>
          <span>{{
            $filter.dictConvert(topInfo.dataFromSource, "DataFromSource")
          }}</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>国籍：</span>
          <span>{{ topInfo.idCard }}</span>
        </el-col>
        <el-col :span="5">
          <span>生日：</span>
          <span>{{ topInfo.mobileNo }}</span>
        </el-col>
        <el-col :span="6">
          <span>证件类型：</span>
          <span>{{ $filter.dateFormat(topInfo.loanDate) }}</span>
        </el-col>
        <el-col :span="6">
          <span>证件号码：</span>
          <span>{{ topInfo.perPayAmount }}元</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>学历：</span>
          <span>{{ topInfo.repaymentCardNo }}</span>
        </el-col>
        <el-col :span="5">
          <span>客户等级：</span>
          <span>{{ topInfo.plateNum }}</span>
        </el-col>
        <el-col :span="6">
          <span>婚姻状况：</span>
          <span>{{ topInfo.businessAddress }}</span>
        </el-col>
        <el-col :span="6">
          <span>单位名称：</span>
          <span>{{ topInfo.boardAddress }}</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>最近一次还款日期：</span>
          <span>{{ topInfo.overdueMoney }}元</span>
        </el-col>
        <el-col :span="5">
          <span>最近一次还款金额：</span>
          <span>{{ topInfo.compensationMoney }}元</span>
        </el-col>
        <el-col :span="6">
          <span>家庭地址所在城市：</span>
          <span>{{ topInfo.compensationPenalty }}元</span>
        </el-col>
        <el-col :span="6">
          <span>客户总账户数：</span>
          <span>{{ topInfo.uncollectedFeeMoney }}元</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>归并历史最高逾期期数：</span>
          <span>{{ topInfo.overdueAmount }}元</span>
        </el-col>
        <el-col :span="5">
          <span>客户归并延滞阶段：</span>
          <span>{{ topInfo.overduePeriod }}</span>
        </el-col>
        <el-col :span="6">
          <span>客户归并逾期总金额：</span>
          <span>{{ $filter.dictConvert(topInfo.leaveKey, "CommonFlag") }}</span>
        </el-col>
        <el-col :span="6">
          <span>毕业院校：</span>
          <span>{{ topInfo.overdueDays }}天({{ topInfo.overdueStage }})</span>
        </el-col>
      </el-row>

      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>入学时间：</span>
          <span>{{ topInfo.overdueAmount }}元</span>
        </el-col>
        <el-col :span="5">
          <span>毕业时间：</span>
          <span>{{ $filter.dateTimeFormat(topInfo.updateTime) }}</span>
        </el-col>
        <el-col :span="6">
          <span>收入：</span>
          <span>{{ $filter.dictConvert(topInfo.leaveKey, "CommonFlag") }}</span>
        </el-col>
        <el-col :span="6">
          <span>联系人姓名：</span>
          <span>{{ topInfo.overdueDays }}天({{ topInfo.overdueStage }})</span>
        </el-col>
      </el-row>

      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>联系人工作单位：</span>
          <span>{{ topInfo.overdueAmount }}元</span>
        </el-col>
        <el-col :span="5">
          <span>邮箱地址：</span>
          <span>{{ $filter.dateTimeFormat(topInfo.updateTime) }}</span>
        </el-col>
      </el-row>
    </div>

    <!-- 企业信息 -->
    <div>
      <el-row>
        <el-col :span="7">
          <span>企业客户编号：</span>
          <span></span>
        </el-col>
        <el-col :span="5" class="padding-top-18">
          <span>企业客户名称：</span>
          <span>{{ topInfo.loanAmount }}元</span>
        </el-col>
        <el-col :span="6" class="padding-top-18">
          <span>统一社会信用代码：</span>
          <span></span>
        </el-col>
        <el-col :span="6" class="padding-top-18">
          <span>注册地所在城市：</span>
          <span>{{
            $filter.dictConvert(topInfo.dataFromSource, "DataFromSource")
          }}</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>注册地址：</span>
          <span>{{ topInfo.idCard }}</span>
        </el-col>
        <el-col :span="5">
          <span>经营地地址：</span>
          <span>{{ topInfo.mobileNo }}</span>
        </el-col>
        <el-col :span="6">
          <span>法人：</span>
          <span>{{ $filter.dateFormat(topInfo.loanDate) }}</span>
        </el-col>
        <el-col :span="6">
          <span>法人证件号：</span>
          <span>{{ topInfo.perPayAmount }}元</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>法人性别：</span>
          <span>{{ topInfo.repaymentCardNo }}</span>
        </el-col>
        <el-col :span="5">
          <span>注册资本：</span>
          <span>{{ topInfo.plateNum }}</span>
        </el-col>
        <el-col :span="6">
          <span>法人手机号：</span>
          <span>{{ topInfo.businessAddress }}</span>
        </el-col>
        <el-col :span="6">
          <span>核心企业编号：</span>
          <span>{{ topInfo.boardAddress }}</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>核心企业名称：</span>
          <span>{{ topInfo.overdueMoney }}元</span>
        </el-col>
        <el-col :span="5">
          <span>核心企业联系人姓名：</span>
          <span>{{ topInfo.compensationMoney }}元</span>
        </el-col>
        <el-col :span="6">
          <span>核心企业联系人电话：</span>
          <span>{{ topInfo.compensationPenalty }}元</span>
        </el-col>
        <el-col :span="6">
          <span>最近一次还款日期：</span>
          <span>{{ topInfo.uncollectedFeeMoney }}元</span>
        </el-col>
      </el-row>
      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>最近一次还款金额：</span>
          <span>{{ topInfo.overdueAmount }}元</span>
        </el-col>
        <el-col :span="5">
          <span>客户归并延滞阶段：</span>
          <span>{{ topInfo.overduePeriod }}</span>
        </el-col>
        <el-col :span="6">
          <span>客户归并逾期总金额：</span>
          <span>{{ $filter.dictConvert(topInfo.leaveKey, "CommonFlag") }}</span>
        </el-col>
        <el-col :span="6">
          <span>客户总账户数：</span>
          <span>{{ topInfo.overdueDays }}天({{ topInfo.overdueStage }})</span>
        </el-col>
      </el-row>

      <el-row class="padding-bottom-4">
        <el-col :span="7">
          <span>归并历史最高逾期期数：</span>
          <span>{{ topInfo.overdueAmount }}元</span>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";

@Component({
  components: {}
})
export default class CustomerInfo extends Vue {
  @Prop({ type: Object })
  private topInfo: object;
}
</script>

<style lang="less" scoped>
.component.customer-info {
  padding: 5px 5px 12px 30px;
  .padding-top-18 {
    padding-top: 18px;
  }
  .padding-bottom-4 {
    padding-bottom: 4px;
  }
  .customer-name {
    height: 60px;
    line-height: 60px;
    color: #333333;
    .svg-icon {
      margin-top: -15px;
    }
    &-info {
      margin-right: 10px;
      font-size: 25px;
      font-weight: 600;
    }
  }
}
</style>
